<template>
  <div id="Recommendation">
    <el-carousel
      :interval="4000"
      type="card"
      height="200px"
    >
      <el-carousel-item
        v-for="(item, index) in banners"
        :key="index"
      >
        <img class="img-w img-h carousel-item" :src="item.imageUrl" :alt="item.typeTitle">
      </el-carousel-item>
    </el-carousel>
    <!-- 热门推荐 -->
    <div class="hot-recommend" @click="goSongMenu">
      <span class="pointer">热门推荐</span>
      <a-icon type="right" />
    </div>
    <ContentCard :dataList="recommoned" @goDetail="goDetail" />
    <!-- 独家放送 -->
    <div class="exclusive">
      <span class="pointer">独家放送</span>
      <a-icon type="right" />
    </div>
  </div>
</template>

<script>
import { bannerList, personalized } from '@/api';
// 引入混入
import mixin from '@/mixins/mixin';
import { mapState } from 'vuex';
import ContentCard from '@/components/Content/ContentCard';

export default {
  name: 'Recommendation',
  mixins: [mixin],
  data() {
    return {
      // 轮播图数据
      banners: [],
      // 推荐歌单
      recommoned: []
    };
  },

  components: {
    ContentCard
  },

  computed: {
    ...mapState({
      resourceList: state => state.detail.resourceList,
      userInfo: state => state.detail.userInfo
    })
  },

  watch: {
    resourceList: {
      handler(value) {
        if (value && value.length) {
          this.recommoned = value;
          this.$forceUpdate();
        }
      },
      deep: true,
      immediate: true
    }
  },

  created() {
    // 获取轮播图
    this.getBanner();
    if (this.isLogin) {
      this.$store.dispatch('detail/getResource');
    } else {
      this.getPersonalized();
    }
  },

  methods: {
    // 获取轮播图列表
    async getBanner() {
      const res = (await bannerList(0)).data;
      this.banners = Object.freeze(res.banners);
    },

    // 获取推荐歌单列表
    async getPersonalized() {
      const res = (await personalized()).data;
      this.recommoned = Object.freeze(res.result);
    },

    // 跳转至歌单详情页
    goDetail(id) {
      this.$router.push({
        name: 'playlistdetail',
        query: { id }
      })
    },
    goSongMenu() {
      this.$router.push({
        name: 'songmenu'
      })
    }
  },
};
</script>

<style lang="less" scoped>
// @import '../../styles/common.css';
#Recommendation {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item {
    border-radius: 10px;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .carousel-item {
    width: 100%;
    height: 100%;
  }
  .hot-recommend {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    span {
      color: #475669 !important;
    }
  }
}
</style>